<template>
  <div>
    <div class="fcRightBox">
      <div class="fcHeader">
        <div class="fcHeader-title-container">
          <el-tabs class="ocpcTabs" style="width: 100%" v-model="form.ocpcType" @tab-click="tabClick">
            <el-tab-pane label="项目" name="项目">
              <el-select v-model="form.sumWay" placeholder="请选择" class="fcSelect" @change="queryList()">
                <span slot="prefix" class="select-prefix">时间单位:</span>
                <el-option v-for="item in sumWaySelectList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>

              </el-select>

              <el-select  v-model="form.promotionDevice" placeholder="请选择" class="fcSelect"
                         @change="queryList()">
                <span slot="prefix" class="select-prefix">推广设备：</span>
                <el-option
                v-for="item in promotionDeviceSelcetList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
              </el-select>

            </el-tab-pane>
            <el-tab-pane label="出价策略" name="出价策略">
              <template slot="label">
                出价策略

                <svg  v-if="form.ocpcType==='出价策略'" style="color: #409EFF"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24" height="24" class="dls-icon brave-the-winds-common-libs-tips-icon" focusable="false"><path fill="currentColor" d="M12.054 18.34a1.242 1.242 0 1 0 0-2.484 1.242 1.242 0 0 0 0 2.484zM8.3 9.7a3.7 3.7 0 1 1 5.813 3.038c-.029.021-.064.05-.106.084-.12.1-.28.247-.438.431-.33.385-.569.835-.569 1.307h-2c0-1.148.57-2.048 1.05-2.608a5.739 5.739 0 0 1 .819-.78l-.004-.008a1.82 1.82 0 0 0 .08-.05l.011-.009.072-.052.009-.006A1.69 1.69 0 0 0 13.7 9.7a1.7 1.7 0 1 0-3.4 0h-2z"></path><path fill="currentColor" fill-rule="evenodd" d="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11zm-2 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" clip-rule="evenodd"></path></svg>

                <svg v-else style="color: #848b99" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24" height="24" class="dls-icon brave-the-winds-common-libs-tips-icon" focusable="false"><path fill="currentColor" d="M12.054 18.34a1.242 1.242 0 1 0 0-2.484 1.242 1.242 0 0 0 0 2.484zM8.3 9.7a3.7 3.7 0 1 1 5.813 3.038c-.029.021-.064.05-.106.084-.12.1-.28.247-.438.431-.33.385-.569.835-.569 1.307h-2c0-1.148.57-2.048 1.05-2.608a5.739 5.739 0 0 1 .819-.78l-.004-.008a1.82 1.82 0 0 0 .08-.05l.011-.009.072-.052.009-.006A1.69 1.69 0 0 0 13.7 9.7a1.7 1.7 0 1 0-3.4 0h-2z"></path><path fill="currentColor" fill-rule="evenodd" d="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11zm-2 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" clip-rule="evenodd"></path></svg>
              </template>
              <el-select v-model="form.sumWay" placeholder="请选择" class="fcSelect" @change="queryList()">
                <span slot="prefix" class="select-prefix">时间单位:</span>
                <el-option v-for="item in sumWaySelectList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>

              </el-select>

              <el-select  v-model="form.promotionDevice" placeholder="请选择" class="fcSelect"
                         @change="queryList()">
                <span slot="prefix" class="select-prefix">推广设备：</span>
                <el-option
                v-for="item in promotionDeviceSelcetList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
              </el-select>
              <el-select style="width: 250px" v-model="form.accessAddress" placeholder="请选择" class="fcSelect"
                         @change="queryList()">
                <span slot="prefix" class="select-prefix">访问地址：</span>
                <el-option
                    v-for="item in accessAddressSelcetList"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                </el-option>
              </el-select>

            </el-tab-pane>
            <el-tab-pane label="推广计划" name="推广计划">
              <template slot="label">
                推广计划
                <svg  v-if="form.ocpcType==='推广计划'" style="color: #409EFF" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24" height="24" class="dls-icon brave-the-winds-common-libs-tips-icon" focusable="false"><path fill="currentColor" d="M12.054 18.34a1.242 1.242 0 1 0 0-2.484 1.242 1.242 0 0 0 0 2.484zM8.3 9.7a3.7 3.7 0 1 1 5.813 3.038c-.029.021-.064.05-.106.084-.12.1-.28.247-.438.431-.33.385-.569.835-.569 1.307h-2c0-1.148.57-2.048 1.05-2.608a5.739 5.739 0 0 1 .819-.78l-.004-.008a1.82 1.82 0 0 0 .08-.05l.011-.009.072-.052.009-.006A1.69 1.69 0 0 0 13.7 9.7a1.7 1.7 0 1 0-3.4 0h-2z"></path><path fill="currentColor" fill-rule="evenodd" d="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11zm-2 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" clip-rule="evenodd"></path></svg>

                <svg v-else style="color: #848b99" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24" height="24" class="dls-icon brave-the-winds-common-libs-tips-icon" focusable="false"><path fill="currentColor" d="M12.054 18.34a1.242 1.242 0 1 0 0-2.484 1.242 1.242 0 0 0 0 2.484zM8.3 9.7a3.7 3.7 0 1 1 5.813 3.038c-.029.021-.064.05-.106.084-.12.1-.28.247-.438.431-.33.385-.569.835-.569 1.307h-2c0-1.148.57-2.048 1.05-2.608a5.739 5.739 0 0 1 .819-.78l-.004-.008a1.82 1.82 0 0 0 .08-.05l.011-.009.072-.052.009-.006A1.69 1.69 0 0 0 13.7 9.7a1.7 1.7 0 1 0-3.4 0h-2z"></path><path fill="currentColor" fill-rule="evenodd" d="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11zm-2 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" clip-rule="evenodd"></path></svg>
              </template>
              <el-select v-model="form.sumWay" placeholder="请选择" class="fcSelect" @change="queryList()">
                <span slot="prefix" class="select-prefix">时间单位:</span>
                <el-option v-for="item in sumWaySelectList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>

              </el-select>

              <el-select  v-model="form.promotionDevice" placeholder="请选择" class="fcSelect"
                         @change="queryList()">
                <span slot="prefix" class="select-prefix">推广设备：</span>
                <el-option
                v-for="item in promotionDeviceSelcetList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
              </el-select>

            </el-tab-pane>

          </el-tabs>
          <div class="right-part">

            <div class="fcHeader-date-pick-container">
              <el-date-picker class="custom-date-picker"
                              format="yyyy/MM/dd"
                              v-model="timerArray"
                              style="width: 240px"
                              type="daterange"
                              align="right"
                              range-separator="~"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              @change="queryList"
                              :picker-options="pickerOptions">
                <template slot="prefix">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24" height="24" class="custom-icon" focusable="false">
                    <path fill="currentColor" d="M9 1.5H7V3h-.5a5 5 0 0 0-5 5v9.4a5 5 0 0 0 5 5h11a5 5 0 0 0 5-5V8a5 5 0 0 0-5-5H17V1.5h-2V3H9V1.5zM15 5H9v1.5H7V5h-.5a3 3 0 0 0-3 3v.5h17V8a3 3 0 0 0-3-3H17v1.5h-2V5zm5.5 5.5h-17v6.9a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-6.9z"></path>
                  </svg>
                </template>
              </el-date-picker>
            </div>

          </div>
        </div>

      </div>

      <!--            智能数据查询-->
      <div
          class="light-ai report-sdk-smart-query-area-container light-ai-card light-ai-card-medium light-ai-card-strong">
        <div class="light-ai light-ai light-ai-card-header light-ai-slot light-ai-group" style="gap: 50px;">
          <div class="light-ai light-ai-card-header-main light-ai-slot-main" style="font-size: 16px">智能数据查询</div>
        </div>
        <div class="light-ai-card-body">
          <div
              class="light-ai light-ai light-ai light-ai-omni-input light-ai-omni-input-medium light-ai-slot light-ai-slot-vertical light-ai-group light-ai-group-gap-xsmall">
            <div class="light-ai light-ai-slot-main">
              <div
                  class="light-ai light-ai light-ai-omni-input-main light-ai-slot light-ai-group light-ai-group-gap-medium">
                <div class="light-ai light-ai-slot-main">
                  <div class="light-ai light-ai-rich-input"
                       style="--internal-light-ai-min-rows: 1; --internal-light-ai-max-rows: 5;">
                    <div contenteditable="true" translate="no" class="tiptap ProseMirror"
                         tabindex="0"><p class="is-empty is-editor-empty"><br
                        class="ProseMirror-trailingBreak"></p></div>
                  </div>
                </div>
                <div class="light-ai light-ai-omni-input-after light-ai-slot-after"
                     style="display: flex;align-items: center;justify-content: space-between">
                  <div style="display: inline-block;height: 25px;line-height: 25px">
                    <span
                        class="light-ai light-ai-text light-ai-text-aux light-ai-text-medium">0</span><span
                      class="light-ai light-ai-text light-ai-text-aux light-ai-text-medium">/100</span></div>
                  <button style="margin-left: 10px;font-size: 24px;"
                          class="light-ai light-ai-omni-input-send light-ai-button light-ai-button-medium light-ai-button-icon light-ai-button-icon-medium light-ai-button-disabled light-ai-button-icon-only"
                          type="button" disabled="">

                    <svg fill="none" viewBox="0 0 24 24" min-width="24" height="24"
                         class="dls-icon light-ai-omni-input-send-icon dls-icon-active"
                         focusable="false">
                      <g stroke-width="2">
                        <path
                            d="m20.7163 11.2981-16.19439-8.85633c-.62917-.34407-1.35838.24963-1.14899.93549l2.56119 8.38934c.04648.1522.04648.3149 0 .4671l-2.56117 8.389c-.20939.6859.51981 1.2796 1.14899.9355l16.19437-8.8563c.5549-.3034.5549-1.1004 0-1.4038z"
                            fill="currentColor" stroke="currentColor"></path>
                        <path d="m4.5 12h9" stroke="#fff"></path>
                      </g>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <p>
          <div class="radio-tag-groups-select-container">
            <div class="radio-tag-groups">
              <div class="radio-tag-groups-container">
                <div class="radio-tag-groups-name"><span>猜你想搜：</span></div>
                <div
                    class="light-ai light-ai radio-tag-groups-tag-group-container light-ai-tag-group light-ai-group light-ai-group-gap-xsmall">
                  <div class="light-ai radio-select-item light-ai-tag light-ai-tag-bubble"
                       tabindex="0"><span class="light-ai-tag-main">转化率最高的3个出价策略</span></div>
                  <div class="light-ai radio-select-item light-ai-tag light-ai-tag-bubble"
                       tabindex="0"><span class="light-ai-tag-main">起量预算最高的3个出价策略数据</span></div>
                  <div class="light-ai radio-select-item light-ai-tag light-ai-tag-bubble"
                       tabindex="0"><span class="light-ai-tag-main">目标转化量最高的出价策略数据</span></div>
                </div>
              </div>
            </div>
          </div>
          <button type="button" name="" class="one-button one-main one-button-text-strong one-button-medium">
                        <span><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24"
                                         height="24" class="dls-icon icon-sync" focusable="false"
                                         style="margin-top: 15px"><path
                            fill="currentColor"
                            d="M11.973 1C5.953 1 1.092 5.936 1.092 12h2c0-4.982 3.987-9 8.881-9 2.717 0 5.153 1.237 6.785 3.192l-.576.333a.5.5 0 0 0 .048.89l2.803 1.241a.5.5 0 0 0 .698-.391l.413-3.098a.5.5 0 0 0-.746-.499l-.887.512C18.521 2.638 15.438 1 11.973 1zm11.119 11c0 6.064-4.861 11-10.882 11-3.465 0-6.548-1.637-8.538-4.18l-.887.512a.5.5 0 0 1-.746-.5l.413-3.097a.5.5 0 0 1 .698-.391l2.804 1.24a.5.5 0 0 1 .047.89l-.576.334C7.057 19.764 9.493 21 12.21 21c4.894 0 8.882-4.018 8.882-9h2z"></path></svg>换一换</span></span>
          </button>
          </p><p></p></div>
      </div>
      <!--           表格-->
      <div class="fcHeader-container fcHeader-container-custom-dash">
        <div class="">
          <div class="contentHeader">
            <el-input v-if="form.ocpcType=='项目'" placeholder="请搜索项目名称" style="width: 200px" v-model="form.ocpcName" @change="queryList"><i
                slot="suffix" class="el-input__icon el-icon-search"></i></el-input>
            <el-input v-if="form.ocpcType=='出价策略'" placeholder="请搜索项目/oCPC出价策略" style="width: 200px" v-model="form.ocpcName" @change="queryList"><i
                slot="suffix" class="el-input__icon el-icon-search"></i></el-input>
            <el-input v-if="form.ocpcType=='推广计划'" placeholder="请搜索推广计划" style="width: 200px" v-model="form.ocpcName" @change="queryList"><i
                slot="suffix" class="el-input__icon el-icon-search"></i></el-input>
            <div class="contentHeader_right" style="justify-content: flex-end">
              <el-dropdown @command="handleCommand" trigger="click" style="margin-right: 16px">
                <el-button style="width: 160px;padding: 6px;text-align: left">
                  <span style="display:inline-block;width: 120px;color: rgba(19, 22, 26, 0.9);font-size: 12px"> <i v-if="!selectedDivision">细分</i><i v-else>细分：</i>{{ selectedDivision }}</span> <i class="el-icon-arrow-down el-icon--right" style="color: rgba(19, 22, 26, 0.9)"> </i>
                </el-button>
                <!-- 第一层子菜单 -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="hour">小时</el-dropdown-item>
                  <el-dropdown-item command="purchase">购买方式</el-dropdown-item>
                  <el-dropdown-item command="device">推广设备</el-dropdown-item>
                  <el-dropdown-submenu>
                    <template slot="title">地域</template>
                    <!-- 第二层子菜单 -->
                    <el-dropdown-item command="province">分省</el-dropdown-item>
                    <el-dropdown-item command="city">分地市</el-dropdown-item>
                  </el-dropdown-submenu>
                </el-dropdown-menu>
              </el-dropdown>

              <el-dropdown  style="margin-right: 16px">
                <el-button type="primary"
                           style="width: 101px; font-size: 12px;height: 28px;line-height: 28px;padding: 0; background-color: #e2e6f0;color: #000; border: 1px solid #dfe4ea; ">
                  <span style="display: inline-block;height: 100%;border-right:1px solid #c9c9c9;padding-right: 12px"> {{
                      value11
                    }}</span>

                  <i style="color: #3b3b3b;font-weight: 600" class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item in options11" :key="item.value">{{ item.label }}</el-dropdown-item>

                </el-dropdown-menu>
              </el-dropdown>
              <el-select style="margin-right: 16px;" v-model="value" placeholder="请选择" class="select-with-prefix1">
                <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
              <el-button class="rightBt" style="padding: 6px 12px;margin-right: 8px;" @click="handleTabClick">重置列宽</el-button>
         </div>
          </div>
          <el-table v-if="form.ocpcType=='项目'" border
                    :data="tableList"
                    style="width: 100%;background: #EBEDF5"
                    :default-sort="{prop: 'date', order: 'descending'}"
          >
            <el-table-column
                prop="createTime"
                label="日期"
                sortable
                align="left"
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="ocpcName"
                label="项目名称"
                sortable
                align="left"
                min-width="180">
            </el-table-column>

            <el-table-column
                prop="toShow"
                label="展现
"
                sortable align="right"
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="click"
                label="点击
"
                sortable align="right"
                min-width="120">
            </el-table-column>
            <el-table-column
                prop="consumption"
                label="消费" sortable
            >
            </el-table-column>
            <el-table-column align="right"
                prop="minimumConsumption"
                label="一键起量消费
"
                sortable
                min-width="160">
            </el-table-column>

            <el-table-column align="right"
                prop="conversionAmount"
                label="目标转化量

"
                sortable
                min-width="140">
            </el-table-column>
            <el-table-column
                prop="depthCost"
                label="深度转化成本
"
                sortable align="right"
                min-width="140">
            </el-table-column>
            <el-table-column
                prop="minimumConAmt"
                label="一键起量目标转化量
"
                sortable align="right"
                min-width="160">
            </el-table-column>
            <el-table-column
                prop="minimumDepthAmt"
                label="一键起量深度转化量
"
                sortable align="right"
                min-width="160">
            </el-table-column>
              <el-table-column
                  prop="depthCost"
                  label="深度转化成本
"
                  sortable align="right"
                  min-width="140">
              </el-table-column>
                <el-table-column
                    prop="conversionCost"
                    label="目标转化成本
"
                    sortable align="right"
                    min-width="140">
            </el-table-column>
          </el-table>
          <el-table v-if="form.ocpcType=='出价策略'" border
                    :data="tableList"
                    style="width: 100%;background: #EBEDF5"
                    :default-sort="{prop: 'date', order: 'descending'}"
          >
            <el-table-column
                prop="createTime"
                label="日期"
                sortable align="left"
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="biddingStrategy"
                label="项目/oCPC出价策略"
                sortable align="left"
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="biddingMode"
                label="出价模式"
                sortable align="right"
                min-width="180">
            </el-table-column>
              <el-table-column
                  prop="conversionType"
                  label="转化类型"
                  sortable align="right"
                  min-width="180">
            </el-table-column>
            <el-table-column
                prop="toShow"
                label="展现
"
                sortable align="right"
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="click"
                label="点击
"
                sortable align="right"
                min-width="120">
            </el-table-column>
            <el-table-column
                prop="consumption"
                label="消费" sortable
            >
            </el-table-column>
            <el-table-column
                prop="minimumConsumption"
                label="一键起量消费
"
                sortable align="right"
                min-width="160">
            </el-table-column>
            <el-table-column
                prop="effectiveScope"
                label="生效范围
"
                sortable align="right"
                min-width="160">
            </el-table-column>
            <el-table-column
                prop="invalidConAmount"
                label="无效转化过滤量
"
                sortable align="right"
                min-width="160">
            </el-table-column>
            <el-table-column
                prop="conversionAmount"
                label="目标转化量

"
                sortable align="right"
                min-width="140">
            </el-table-column>
            <el-table-column
                prop="minimumConAmt"
                label="一键起量目标转化量
"
                sortable align="right"
                min-width="160">
            </el-table-column>

            <el-table-column
                prop="depthCost"
                label="深度转化成本
"
                sortable align="right"
                min-width="140">
            </el-table-column>
            <el-table-column
                prop="conversionCost"
                label="目标转化成本
"
                sortable align="right"
                min-width="140">
            </el-table-column>
          </el-table>
          <el-table v-if="form.ocpcType=='推广计划'" border
              :data="tableList"
              style="width: 100%;background: #EBEDF5"
              :default-sort="{prop: 'date', order: 'descending'}"
          >
            <el-table-column
                prop="createTime"
                label="日期"
                sortable align="left"
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="promotionPlan"
                label="推广计划"
                sortable align="left"
                min-width="180">
            </el-table-column>
            <el-table-column min-width="180" sortable
                             prop="biddingStrategy" align="left"
                             label="oCPC出价策略">

            </el-table-column>
            <el-table-column
                prop="biddingMode" sortable align="left" min-width="120"
                label="出价模式">

            </el-table-column>
            <el-table-column
                prop="conversionType" sortable align="left" min-width="120"
                label="转化类型">

            </el-table-column>
            <el-table-column
                prop="toShow" align="right"
                label="展现
"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="click"
                label="点击
"
                sortable  align="right"
                min-width="120">
            </el-table-column>
            <el-table-column
                prop="consumption" sortable
                label="消费"  align="right"
            >
            </el-table-column>
            <el-table-column
                prop="invalidConAmount"
                label="无效转化过滤量
"
                sortable  align="right"
                min-width="160">
            </el-table-column>

            <el-table-column
                prop="conversionAmount"
                label="目标转化量

"
                sortable  align="right"
                min-width="140">
            </el-table-column>
            <el-table-column
                prop="depthCost"
                label="深度转化成本
"
                sortable  align="right"
                min-width="140">
            </el-table-column>
            <el-table-column
                prop="conversionCost"
                label="目标转化成本
"
                sortable  align="right"
                min-width="140">
            </el-table-column>
          </el-table>

        <div
              style="height: 80px;display: flex;align-items: center;justify-content: flex-end;width: 100%;margin-top: 10px;line-height: 80px">
            <div>
              <el-pagination background
                             style="min-width: 380px;height: 80px;ox-sizing: border-box;padding-top: 23px"
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
                             :current-page="form.pageNum"
                             :page-size="form.pageSize"
                             :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                             layout="sizes, prev, pager, next,jumper"
                             :total="form.total"
              ></el-pagination>
            </div>
            <div style="display: block">
              <el-button
                  style="display: block;margin-left: 0px; background: #ebedf5;border-color: #ebedf5;color: rgba(19, 22, 26, 0.9);"
                  type="primary" size="small" @click="queryList">确定
              </el-button>

            </div>

          </div>
        </div>

      </div>


    </div>

  </div>
</template>

<script>
import ItemMixins from "./item.mixins";
import {ocpcReportList} from '@/services/model/datacenter'
import * as echarts from 'echarts';

export default {
  mixins: [ItemMixins],
  data() {
    return {
      chartInstance: null,
      keySumList: [],
      searchSumList: [],
      form: {ocpcType: '项目'},
      isToggleStatus: false,

      chart: null,
      value: '下载',
      accessAddressSelcetList: [{
        value: '全部',
        label: '全部'
      }, {
        value: '小程序访问地址',
        label: '小程序访问地址'
      },],
      conIndicatorsSelectList: [{
        value: '咨询按钮点击量',
        label: '咨询按钮点击量'
      }, {
        value: '三句话咨询量',
        label: '三句话咨询量'
      }, {
        value: '一句话咨询量',
        label: '一句话咨询量'
      }, {
        value: '小程序线索量',
        label: '小程序线索量'
      },

        {
          value: '有意向客户量',
          label: '有意向客户量'
        }, {
          value: '聊到相关业务',
          label: '聊到相关业务'
        }, {
          value: '回访-电话接通量',
          label: '回访-电话接通量'
        }, {
          value: '回访-信息确认量',
          label: '回访-信息确认量'
        },

        {
          value: '回访-发现意向量',
          label: '回访-发现意向量'
        }, {
          value: '回访-高潜成交量',
          label: '回访-高潜成交量'
        }, {
          value: '回访-成单客户量',
          label: '回访-成单客户量'
        }, {
          value: '表单按钮点击量',
          label: '表单按钮点击量'
        },
        {
          value: '表单调起按钮点击量',
          label: '表单调起按钮点击量'
        }, {
          value: '表单提交成交量',
          label: '表单提交成交量'
        }, {
          value: '电话按钮点击量',
          label: '电话按钮点击量'
        }, {
          value: '电话拨通量',
          label: '电话拨通量'
        },

        {
          value: '下载（预约）按钮点击量',
          label: '下载（预约）按钮点击量'
        }, {
          value: '预约量',
          label: '预约量'
        }, {
          value: '申请量',
          label: '申请量'
        }, {
          value: '授信量',
          label: '授信量'
        },

        {
          value: '放款量',
          label: '放款量'
        }, {
          value: '短信咨询按钮单击量',
          label: '短信咨询按钮单击量'
        }, {
          value: '地图按钮点击量',
          label: '地图按钮点击量'
        }, {
          value: '抽奖按钮点击量',
          label: '抽奖按钮点击量'
        },

        {
          value: '预约按钮点击量',
          label: '预约按钮点击量'
        }, {
          value: '投票按钮点击量',
          label: '投票按钮点击量'
        }, {
          value: '评价按钮点击量',
          label: '评价按钮点击量'
        }, {
          value: '关注按钮点击量',
          label: '关注按钮点击量'
        },

        {
          value: '店铺起调量',
          label: '店铺起调量'
        }, {
          value: '粉丝关注成功量',
          label: '粉丝关注成功量'
        }, {
          value: '微信起调按钮点击量',
          label: '微信起调按钮点击量'
        }, {
          value: '微信加粉成功量',
          label: '微信加粉成功量'
        },
        {
          value: '二次跳转量',
          label: '二次跳转量'
        }, {
          value: '电商订单量',
          label: '电商订单量'
        }, {
          value: '订单提交成功量',
          label: '订单提交成功量'
        }, {
          value: '客户自定义转化量',
          label: '客户自定义转化量'
        },

        {
          value: '微信复制按钮点击量',
          label: '微信复制按钮点击量'
        }, {
          value: '店铺停留转换量',
          label: '店铺停留转换量'
        }, {
          value: '综合线索收集',
          label: '综合线索收集'
        }, {
          value: '商品支付成功量',
          label: '商品支付成功量'
        },


        {
          value: '有效咨询',
          label: '有效咨询'
        }, {
          value: '其他转化量(落地页)',
          label: '其他转化量(落地页)'
        }, {
          value: '微信小程序调起人数',
          label: '微信小程序调起人数'
        }, {
          value: '激活人数',
          label: '激活人数'
        },

        {
          value: '注册人数',
          label: '注册人数'
        }, {
          value: '付费人数',
          label: '付费人数'
        }, {
          value: '付费次数',
          label: '付费次数'
        }, {
          value: '商品下单成功量',
          label: '商品下单成功量'
        },

        {
          value: '深度使用量',
          label: '深度使用量'
        }, {
          value: '次日留存人数',
          label: '次日留存人数'
        }, {
          value: '7日留存人数',
          label: '7日留存人数'
        }, {
          value: '登录人数',
          label: '登录人数'
        },
        {
          value: '应用调起人数',
          label: '应用调起人数'
        }, {
          value: '2日留存人数',
          label: '2日留存人数'
        }, {
          value: '3日留存人数',
          label: '3日留存人数'
        }, {
          value: '4日留存人数',
          label: '4日留存人数'
        },

        {
          value: '5日留存人数',
          label: '5日留存人数'
        }, {
          value: '6日留存人数',
          label: '6日留存人数'
        }, {
          value: '14日留存人数',
          label: '14日留存人数'
        }, {
          value: '其它转化量(APP)',
          label: '其它转化量(APP)'
        },
      ],
      options2: [{
        value:  '下载',
        label: '下载'
      }, {
        value: '发送邮箱',
        label: '发送邮箱'
      }],
      isSelect: '账户整体',
      activeName: '整体走势',

    };
  },
  methods: {
    tabClick(){
     this.form.accessAddress='';
     this.queryList()
    },
    async queryList() {

      this.form.createTime = this.formatDate(this.timerArray[0]);
      this.form.updateTime = this.formatDate(this.timerArray[1]);
      let res = await ocpcReportList(this.form)
      const modifiedArray = this.replaceNullWithDash( res.rows);
      this.tableList = modifiedArray|| []

       this.form.total = Math.ceil(Number(res.total) );
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chartInstance = echarts.init(this.$refs.chart);

      // 指定图表的配置项和数据
      const option = {
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '100%',
            data: [
              {value: 0, name: ''},
              {value: 0, name: ''},
              {value: 0, name: ''},
              // ...其他数据
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.chartInstance.setOption(option);
    },

    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  mounted() {
    console.log(11111)
    this.queryList()
  },
};
</script>
<style>
</style>
<style scoped lang="less">
.fcRightBox {
  height: 100%;
  width: calc(100vw - 240px);

  .fcHeader {
    background: #fff;
    border-radius: 6px;
    padding: 16px 24px 20px;
    margin-bottom: 24px;

    .fcHeader-title-container {

      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;

      .left-part {

        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .title {
          font-size: 20px;
          color: #282c33;
        }

        .refresh-data-time {
          display: inline-block;
          margin-bottom: 4px;
        }

      }

      .right-part {
        text-align: right;
        position: absolute;
        right: 10px;
        top: 0;
        width: 20%;

        .baidu-market-tip {
          color: #a8b0bf;
          font-size: 12px;

          .baidu-market-name {
            color: #0052cc;
          }
        }

        .fcHeader-date-pick-container {
          margin-left: 12px;
          flex-wrap: wrap;

          /deep/ .el-checkbox {
            margin-left: 12px;
          }
        }
      }
    }
  }

  .fcHeader-container-custom-dash {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }

  .fcHeader-container {
    position: relative;
    background: #fff;
    border-radius: 6px;
    padding: 24px;
    padding-top: 12px;

    .fcHeader-container-title-box {
      position: absolute;
      right: 24px;
      top: 20px;
      height: 28px;
      display: flex;
      align-items: center;

      .fcHeader-container-title-tip {
        font-size: 12px;
        color: #a8b0bf;
        z-index: 9;
      }
    }
  }

  .account-report-radio-container {
    width: calc(100% - 48px);
    display: flex;

    overflow: auto;

    .account-report-radio-card {
      min-width: 208px;
      padding: 12px 16px;
      border-radius: 6px;
      border: 1px solid #c4daff;
      background: #fff;
      margin-right: 16px;
      cursor: pointer;
      color: #545b66;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;

      .account-report-radio-card-base {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .account-report-radio-card-base-cost {
          display: flex;
          align-items: center;
          color: #282c33;
          font-weight: 500;

          .account-report-radio-card-base-cost-num {
            font-size: 20px;
            line-height: 28px;
            margin: 0 4px;
          }
        }
      }
    }

    .account-report-radio-card-selected {
      border: 1px solid #0054e6;
      color: #0054e6;

      .account-report-radio-card-base-cost {
        color: #0054e6;
      }
    }

  }
}
</style>
<style scoped>
.dashboard .box-card {
  margin-bottom: 20px;
}

.dashboard .text-item {
  padding: 20px 0;
  text-align: center;
}

.dashboard .number {
  font-size: 24px;
  color: #333;
}

.dashboard .change {
  font-size: 14px;
  color: #333;
}

.dashboard .change el-icon {
  color: #67C23A;
}

.chart {
  width: 100%;
}

.contentHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;

}

.contentHeader_right {
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.insight-report-data-card-sum-card {
  width: 24%;
  background-color: #fff;
  min-height: 124px;
  border-radius: 4px;
  padding: 16px 16px 12px;
  display: flex;
  margin: 10px 0;
  flex-direction: column;


}

.insight-report-data-card-sum-card-title {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #848b99;
  line-height: 1.4;
  font-weight: 400;
}

.insight-report-data-card-sum-card-value {
  font-size: 24px;
  color: #333;
  line-height: 1.4;
  font-weight: 500;
  margin-top: 4px;
}

.insight-report-data-card-sum-card-rate {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
}

.insight-report-data-card-sum-card-rate-content {
  font-size: 12px;
  color: #848b99;
  line-height: 1.4;
  font-weight: 400;
}

.chart-area {
  width: 200px;
}


</style>

